<script setup lang="ts">
import { onBeforeUnmount } from "vue";
import useDetailStore from "@/pinia/modules/detailStore/detailStore.ts";
import ReleHeader from "@/views/detail/components/relevant/releHeader.vue";

interface Props {
   goodId?: string;
   list?: any[];
}

defineProps<Props>();

const detailStore = useDetailStore();


onBeforeUnmount(()=>{
   detailStore.relevantList=[]
})

</script>

<template>
   <div class="relevant">
      <rele-header :good-id="goodId"></rele-header>
      <el-carousel trigger="click">
         <el-carousel-item v-for="(item,index) in list" :key="index">
            <Good v-for="(good) in item" :good="good"></Good>
         </el-carousel-item>
      </el-carousel>
   </div>
</template>

<style scoped lang="less">
.relevant {
   min-height: 460px;
   margin-top: 20px;
   background: #ffffff;


   :deep(.el-carousel) {
      min-height: 380px;


      .el-carousel__button {
         background-color: @xtxColor !important;
      }

      .el-carousel__container {
         min-height: 380px;

         .el-carousel__item {
            min-height: 380px;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
         }
      }

   }
}
</style>
